<template>
  <div class="favorite">
    <template v-if="dataList.length">
      <div class="handle-utils">
        <div>
          <el-checkbox
            style="padding: 0"
            v-if="showBatchHandleBtn"
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
        </div>
        <div
          class="setting-btn"
          @click="showBatchHandleBtn = !showBatchHandleBtn"
        >
          <template v-if="!showBatchHandleBtn">
            <el-icon class="mr-1"><Setting /></el-icon>管理
          </template>
          <template v-else>
            <span class="text-red-500 mr-5" @click.stop="cancelFavorite">
              删除已选 ({{ checkList.length }})
            </span>
            <span class="text-gray-text">取消</span>
          </template>
        </div>
      </div>
      <div class="favorite-list" v-if="showBatchHandleBtn">
        <el-checkbox-group
          v-model="checkList"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="item in dataList"
            :key="item.sourceId"
            :label="item"
          >
            <div class="favorite-item h-20">
              <div class="mr-6">
                <el-tag v-if="item.sourceType == '1'" type="success"
                  >资讯</el-tag
                >
                <el-tag v-else-if="item.sourceType == '2'" type="danger"
                  >政策</el-tag
                >

                <el-tag v-else-if="item.sourceType == '3'" type="warning"
                  >部门</el-tag
                >
                <el-tag v-else-if="item.sourceType == '4'" type="info"
                  >立项</el-tag
                >
              </div>
              <p class="title">{{ item.title }}</p>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="favorite-list" v-else>
        <div class="content">
          <div
            class="favorite-item"
            v-for="(item, index) in dataList"
            :key="item.sourceId"
            @click="navigateToDetail(item.sourceId, item.sourceType)"
          >
            <div class="mr-6">
              <el-tag v-if="item.sourceType == '1'" type="success">资讯</el-tag>
              <el-tag v-else-if="item.sourceType == '2'" type="danger"
                >政策</el-tag
              >

              <el-tag v-else-if="item.sourceType == '3'" type="warning"
                >部门</el-tag
              >
              <el-tag v-else-if="item.sourceType == '4'" type="info"
                >立项</el-tag
              >
            </div>
            <p class="title">{{ item.title }}</p>
            <svg-icon
              class="cursor-pointer"
              color="#f2ea57"
              name="favorite"
              size="24px"
              @click.stop="cancelFavorite(index)"
            />
            <p style="margin-left:5px">{{item.createTime}}</p>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <el-empty description="暂无收藏记录" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { Setting } from "@element-plus/icons-vue";
import { useFavoriteHooks, navigateToDetail } from "./hooks";

const {
  dataList,
  checkList,
  checkAll,
  isIndeterminate,
  handleCheckAllChange,
  handleCheckedCitiesChange,
  showBatchHandleBtn,
  cancelFavorite
} = useFavoriteHooks("care");
</script>

<style scoped lang="postcss">
.favorite {
  @apply px-4 bg-white py-3;
  .handle-utils {
    @apply flex justify-between items-center border-b border-gray-bg pb-3;
    .setting-btn {
      @apply flex items-center cursor-pointer;
      height: 32px;
    }
  }
  .favorite-list {
    :deep(.el-checkbox) {
      @apply w-full px-3 mb-3;
      height: 50px;
      box-shadow: 0 0 3px 0px #666;
    }
    .favorite-item {
      @apply flex w-full items-center cursor-pointer;
    }
    .content {
      .favorite-item {
        @apply px-3 mb-3;
        height: 50px;
        box-shadow: 0 0 3px 0px #666;
        .title {
          @apply flex-1;
        }
      }
    }
  }
}
</style>
